<template>
  <div class="user-info-edit-page-wrapper">
    <div class="info-main">
      <div class="info-category">
        <ul class="info-category-list">
          <li
            v-for="(item, idx) in infoCategories"
            :key="idx"
            :class="{
              bgSelectGray: idx === selectIdx,
              colorBlue: idx === selectIdx,
            }"
            @click="selectIdx = idx"
          >
            {{ item }}
          </li>
        </ul>
      </div>

      <div class="info-edit">
        <user-base-info class="user-base-info"></user-base-info>

        <component
          :is="selectIdx ? 'UserAccountInfoEdit' : 'UserNormalInfoEdit'"
          class="user-info-edit-card"
        ></component>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import UserBaseInfo from './profile/UserBaseInfo.vue'
import UserNormalInfoEdit from './edit/UserNormalInfoEdit.vue'
import UserAccountInfoEdit from './edit/UserAccountInfoEdit.vue'
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'

const infoCategories = ['基本信息', '账户信息']
const selectIdx = ref(0)

const infoMap = new Map([
  ['username', '用户名'],
  ['avatar', '头像'],
  ['nickname', '昵称'],
  ['sex', '性别'],
  ['sign', '格言'],
  ['birthday', '生日'],
  ['location', '住址'],
  ['education', '文凭'],
  ['university', '大学'],
  ['direction', '主攻方向'],
  ['email', '邮箱'],
  ['userpwd', '密码'],
])

const infoPlaceholderMap = new Map([
  ['username', 'NoName'],
  ['avatar', '头像'],
  ['nickname', '小可爱'],
  ['sex', '你是雌性还是雄性？'],
  ['sign', '写下你的格言吧！'],
  ['birthday', '你在哪一天出生呢？'],
  ['location', '你住在哪里呢？'],
  ['education', '你的文凭是什么呢？'],
  ['university', '你毕业于哪所大学呢？'],
  ['direction', '主攻方向'],
  ['userpwd', '密码'],
])

const userStore = useUserStore()
function renewInfo(newVal: string, key: string) {
  let kvp = { key, value: newVal }
  if (selectIdx.value) {
    userStore.changeAccountInfo(kvp)
  } else {
    userStore.changeBaseInfo(kvp)
  }
}

let userInfos = computed(() => {
  if (selectIdx.value > 0) return userStore.userAccountInfos
  else return userStore.userBaseInfos
})

let userInfoKeys = computed(() => {
  let keys = Object.keys(userInfos.value as any)
  keys.sort((a, b) => (a < b ? -1 : 1))
  return keys
})
</script>

<style lang="scss" scoped>
.user-info-edit-page-wrapper {
  width: var(--innerWidth);
  min-height: 800px;
  margin: 0 auto;

  .info-main {
    margin-top: 10px;
    height: 800px;
    --w1: calc(0.25 * var(--innerWidth));
    --w2: calc(0.73 * var(--innerWidth));

    .info-category,
    .info-edit {
      box-sizing: border-box;
      height: 100%;
    }

    .info-category {
      float: left;
      width: var(--w1);
    }

    .info-edit {
      float: right;
      width: var(--w2);
    }
  }

  .info-category {
    padding: 10px 0;
    background-color: white;
    text-align: center;

    .info-category-list {
      line-height: 50px;
      font-size: 16px;

      li:hover {
        background-color: var(--selectGray);
        cursor: pointer;
      }
    }
  }

  .info-edit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .user-base-info {
      --userBaseInfoWidth: var(--w2);
      --userBaseInfoHeight: 140px;
    }

    .user-info-edit-card {
      margin-top: 10px;
      --userNormalInfoEditWidth: var(--w2);
      --userAccountInfoEditWidth: var(--w2);
    }
  }
}
</style>
